<template>
  <el-row class="board-page-wrapper">
    <section class="query-container">
      <el-row :gutter="10">
        <el-col :span="6">
          <span class="query-label">学年*</span>
          <el-select size="small" v-model="query.studyYearChoose">
            <el-option
              v-for="(item, index) in studyYearList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="9">
          <el-col :span="12">
            <span class="query-label">校区*</span>
            <el-select size="small" v-model="query.schoolChoose">
              <el-option
                v-for="(item, index) in schoolList"
                :label="item.label"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <span class="query-label">楼号*</span>
            <el-select size="small" v-model="query.floorChoose">
              <el-option
                v-for="(item, index) in floorList"
                :label="item.label"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="9">
          <span class="query-label">场地类别</span>
          <div class="two-box">
            <el-select size="small" v-model="query.fieldBrandChoose">
              <el-option
                v-for="(item, index) in fieldBrandList"
                :label="item.label"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
            <el-select size="small" v-model="query.fieldBrandChoose" style="margin-left: 10px;">
              <el-option
                v-for="(item, index) in fieldBrandList"
                :label="item.label"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span class="query-label">座位数</span>
          <div class="option-box">
            <el-input size="small" v-model="query.seatStart"> </el-input><span style="margin: 0 8px;">至</span>
            <el-input size="small" v-model="query.seatEnd"> </el-input>
          </div>
        </el-col>
        <el-col :span="9">
          <span class="query-label">场地名称</span>
          <el-input size="small" placeholder="请输入" v-model="query.fieldName"> </el-input>
        </el-col>
        <el-col :span="9">
          <span class="query-label">周次</span>
          <el-select size="small" v-model="query.weekTimeChoose">
            <el-option
              v-for="(item, index) in weekTimeList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span class="query-label">星期</span>
          <el-select size="small" v-model="query.weekChoose"> </el-select>
        </el-col>
        <el-col :span="9">
          <span class="query-label">节次</span>
          <el-select size="small" v-model="query.sectionChoose"> </el-select>
        </el-col>
        <el-col :span="9" style="display: flex;flex-direction: row-reverse;">
          <el-button size="small" style="margin-left: 10px;" @click="resetQuery">清空</el-button>
          <el-button size="small">搜索</el-button>
        </el-col>
      </el-row>
    </section>
    <section class="board-table-wrapper">
      <el-table :data="tableData" :border="true" style="width: 100%" ref="table">
        <el-table-column type="selection" width="45" align="center"> </el-table-column>
        <el-table-column prop="id" label="场地编号" align="center"> </el-table-column>
        <el-table-column prop="month" label="场地名称" align="center"> </el-table-column>
        <el-table-column prop="departName" label="校区" align="center"> </el-table-column>
        <el-table-column prop="name" label="场地类别" align="center"> </el-table-column>
        <el-table-column prop="idCard" label="座位数" align="center"> </el-table-column>
        <el-table-column prop="levelSalary" label="考试座位数" align="center"> </el-table-column>
        <el-table-column prop="postSalary" label="楼号" align="center"> </el-table-column>
        <el-table-column prop="serviceAllowance" label="楼层号" align="center"> </el-table-column>
        <el-table-column prop="achieveAllowance" label="场地借用类型" align="center"> </el-table-column>
      </el-table>
    </section>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        query: {
          studyYearChoose: ''
        },

        studyYearList: [
          {
            label: '2020',
            id: '1'
          },
          {
            label: '2021',
            id: '2'
          }
        ],
        schoolList: [
          {
            label: '北校区',
            value: 1
          }
        ],
        floorList: [
          {
            label: '一楼',
            value: 1
          }
        ],
        fieldBrandList: [],
        weekTimeList: [],
        tableData: [
          {
            id: 1010206020,
            month: '20201221',
            departName: '致远楼B602'
          }
        ]
      }
    },
    mounted() {
      // this.$nextTick(() => {
      //   this.$refs.table.doLayout(); //解决表格错位
      // });
    },
    methods: {
      resetQuery() {
        this.query = {}
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
  .board-page-wrapper {
    padding: 10px;
    .query-container {
      padding: 10px 30px;
      display: flex;
      margin-left: -15px;
      margin-right: -15px;
      flex-wrap: wrap;
      .el-row {
        line-height: 32px;
        padding: 5px 15px;
        width: 100%;
        .el-col {
          display: flex;
          flex-wrap: nowrap;
          .query-label {
            width: 70px;
            text-align: right;
            margin-right: 5px;
          }
          .el-input,
          .el-select {
            width: calc(100% - 70px);
          }
          .two-box {
            display: flex;
          }
          .option-box {
            display: flex;
            width: 100%;
            flex: 1;
            justify-content: space-between;
          }
        }
      }
      & > div {
        line-height: 32px;
        padding: 0 15px;
      }
    }
  }
</style>
